<template>
  <div class="bg_white">
    <ComHeader title="参考批价" @get-height="handleHeadHeight" />
    <div class="basic-info">
      <div class="group-box">
        <div class="group-title">
          <span>参考批价</span>
          <!-- <span v-if="total" class="title">总价: {{ total }} 元</span> -->
          <div class="btn-green" @click="handleRefreshRating"><span>刷新批价</span></div>
        </div>
        <div v-for="(v,i) in list" :key="i" class="group-content">
          <Cell title="空间名称" :value="v.roomName" :right="false" />
          <Cell title="产品名称" :value="v.goodsName" :right="false" />
          <Cell title="单位" :value="v.quotationUnit" :right="false" />
          <Cell title="数量" :value="v.quantity" :right="false" />
          <Cell title="参考批价" :value="v.ratingPrice" :right="false" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Cell from '@/components/ListCell'
import { getRatingPrice } from '@/apis/optyCategory'
export default {
  name: 'ReferRating',
  components: { Cell },
  data() {
    return {
      headHeight: 50,
      list: [],
      total: 0
    }
  },
  created() {
    // console.log(this.$route)
    const { list = [], total = 0 } = this.$route.params
    this.list = list
    this.total = total
    // this.handleRefreshRating()
  },
  methods: {
    handleHeadHeight(h) {
      this.headHeight = h
    },
    handleRefreshRating() {
      const { optyCategoryId } = this.$route.query
      getRatingPrice({ optyCategoryId: optyCategoryId }).then(res => {
        if (res.success === 1 && res.data) {
          const { schemeGoodsDTOS = [], total = 0 } = res.data
          this.list = schemeGoodsDTOS
          this.total = total
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.basic-info {
  padding: 16px;
}
.group-box {
  box-sizing: border-box;
  background: #F8F8FA;
  border-radius: 8px;
  margin-bottom: 16px;

  .group-title{
    position: relative;
    padding: 0 16px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: bold;
    color: #16BC83;
    &::after{
      content: '';
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 0;
      height: 1px;
      background: #D9DDE2;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    .icon-edit{
      width: 18px;
      // height: 12px;
    }
    .btn-green{
      padding: 0 12px;
      height: 32px;
      line-height: 32px;
      background: rgba(22, 188, 131, 0.12);
      border-radius: 8px;
      color: #16BC83;
      font-size: 12px;
      font-weight: bold;
      text-align: center;
    }
  }
  .group-content {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 0;
      height: 1px;
      background: #D9DDE2;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }

    &:last-of-type {
      &::after {
        display: none;
      }
    }
  }
  /deep/.c-cell{
    background: #F8F8FA;
    padding: 6px 16px;
    min-height:auto;
    &::after{
      border: 0;
    }
    .label{
      color: #111111;
        font-size: 12px;
        font-weight: bold;
    }
    .value{
      color: #7D8091;
      font-size: 12px;
    }
  }
}
</style>
